<template>
<div class="wrapp">
    <div class="recommend">周末去哪儿<span>></span></div>
  <div class="title" v-for="item of weekedlist" :key="item.id">
      <ul>
          <li class="item">
              <img :src="item.imgurl" alt="">
              <div class="item-wrapp">
                  <p class="item-title">{{item.title}}</p>
                  <p class="item-desc">{{item.desc}}</p>
              </div>
          </li>
      </ul>
  </div>
</div>
</template>

<script>
export default {
  name: 'homerecommend',
  props: {
    weekedlist: Array
  }
}
</script>

<style lang="scss" scoped>
   .wrapp{
    //  background-color: rgb(94, 51, 51);
     .recommend{
       width: 100%;
       line-height: .64rem;
       background:rgb(233, 229, 229);
       margin-top: .1rem;
       padding-left: .2rem;
       font-weight: 600;
       span{
         float: right;
         margin-right: .3rem;
         font-size: .46rem;
         box-sizing: border-box;
       }
   }
   .title{
      width: 100%;
      height: 3.2rem;    //奇怪
      text-indent: .2rem;
      .item{
          box-sizing: border-box;
          padding: .1rem;
          img{
              width: 100%;
              height: 1.8rem;
              float: left;
          }
          .item-wrapp{
              flex: 1;
              float: left;
              margin: .2rem 0;
              width: 100%;
              p{
                   overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
              }
              .item-title{
                 font-weight: 700;
              }
              .item-desc{
                  color: rgb(61, 59, 59);
                  line-height: .68rem;
                  width: 100%;
                   overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
              }
          }
      }
   }
   }
</style>
